body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}
* {
    box-sizing: border-box;
}
.demo {
    height: 100vh;
    margin: 0 auto;
    max-width: 80rem;
    padding: 2rem;
}

/* Custom spinner */
@keyframes square-spinner {
    25% {
        transform: rotateX(180deg) rotateY(0);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(0) rotateY(180deg);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}
.square-spinner {
    background-color: rgba(0, 0, 0, 0.2);
    width: 2rem;
    height: 2rem;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: square-spinner;
}
